<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-if="http://www.w3.org/1999/xhtml">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(2)"/>

<!--平台管理菜单-->
<div id="topnav" th:replace="management/partial/topnav :: topnav(2)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="management/partial/factory_left:: nav(2)"/>

    <div class="container-fluid" id="pcont">
        <div class="cl-mcont">
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div id="show" class="header from-group"><h3>用户管理</h3>
                        </div>

                        <div class="content">
                            <div class="table-responsive">
                                <div id="datatable_wrapper"
                                     class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                    <input type="hidden" id="hidtype" th:value="${OrganizationType}"/>

                                    <div class="row" >
                                        <div class="from-group" >

                                            <div id="but" class="btn-group col-sm-2" style="width: 180px;float: left" >

                                                <button date-id="but1" type="button"
                                                        class="btn btn-default btn-sm active"
                                                        onclick="SimpleSearch(1)">
                                                    政府人员
                                                </button>
                                                <button date-id="but2" type="button" class="btn btn-default btn-sm"
                                                        onclick="SimpleSearch(2)">
                                                    养殖人员
                                                </button>

                                            </div>

                                            <div class="row" style="margin: 0 auto">
                                                <div class="col-sm-2" style="width: 150px;">

                                                    <select class="select2" id="region">
                                                        <span th:each="cityAreaDto :${cityAreaDtoList}">
                                                            <optgroup th:label="${cityAreaDto.city}">
                                                                <span th:each="region :${cityAreaDto.regions}">
                                                            <option th:value="${region}"
                                                                    th:text="${region}">南漳县</option>
                                                                    </span>
                                                          </optgroup>
                                                                   </span>
                                                    </select>

                                                </div>


                                                <div class="col-sm-2" style="width: 150px;">

                                                    <select class="select2" id="company">
                                                        <option value="">单位</option>
                                                        <span th:each="organ :${organs}">

                                                            <option th:value="${organ}"
                                                                    th:text="${organ}"></option>

                                                                   </span>
                                                    </select>

                                                </div>

                                                <div class="col-sm-2" style="width: 150px;">

                                                    <select class="select2" id="department">
                                                        <option value="">部门</option>
                                                    </select>

                                                </div>

                                                <div class="col-sm-2" style="width: 100px">
                                                    <span>
                                                        <button type='button' class='btn btn-default'
                                                                onclick="location.href='/management/user/adduserGov'">添加政府人员</button>
                                                    </span>
                                                </div>
                                                <div  class="col-sm-2" style="width: 100px">
                                                    <span>
                                                        <button type='button' class='btn btn-default'
                                                                onclick="location.href='/management/user/adduserFac'">添加养殖人员</button>
                                                    </span>
                                                </div>



                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 10px;">
                                            <div class="col-sm-2" style="margin-left: 205px">
                                                <div class="input-group ">

                                                <span style="white-space: nowrap"> <input id="mobile"
                                                                                          placeholder="手机号/账户"
                                                                                          class="form-control layer-date"
                                                                                          type="text"> </span>
                                                </div>
                                            </div>
                                            <div class="col-sm-2" style="margin-left: 30px">

                                                <div class="input-group ">

                                                <span style="white-space: nowrap"> <input id="name" placeholder="名称"
                                                                                          class="form-control layer-date"
                                                                                          type="text"> </span>
                                                </div>
                                            </div>
                                            <div class="col-sm-2" style="margin-left: 20px">
                                            <span>
                                                <button class="btn btn-primary" onclick="SearchBtn()">搜索</button>
                                                </span>
                                            </div>

                                        </div>
                                        <br/>

                                        <div class="row">
                                            <div class="col-sm-12">

                                                <!-- Table -->
                                                <table id="jqGrid"></table>
                                                <div id="jqGridPager"></div>

                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript"
        src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">

        $("#company").change(function () {
            $("#department").html("");
            $("#department").html("<option value=''>部门</option>");


            $.ajax({
                type: "GET",
                url: "/management/user/department",
                data: {
                    governmentName: $("#company").val()
                },
                dataType: "json",
                success: function (data) {
                    var str = "";
                    $.each(data, function (index, item) {
                        str += "<option value=" + item + ">" + item + "</option>";
                        $("#department").append(str);
                        str = "";
                    })
                }
            })


        })
        App.init();
        var dataf = {   // 构建查询需要的参数
            usertype: $("#hidtype").val(),
            company: $("#company").val(),
            region: $("#region").val(),
            department: $("#department").val(),
            name: $("#name").val(),
            mobile: $("#mobile").val()
        };
        //grid
        $("#jqGrid").jqGrid({
            url: '/management/user/userList',
            mtype: "GET",
            styleUI: 'Bootstrap',
            postData: dataf,
            datatype: "json",
            autowidth: true,
            colModel: [
                {
                    label: '<span style="text-align: center">序号</span>',
                    name: 'user.id',
                    key: true,
                    width: 50,
                    align: 'center'
                },
                {
                    label: '<span style="text-align: center">区域</span>',
                    name: 'userProfile.region',
                    width: 75,
                    align: 'center'
                },
                {
                    label: '<span style="text-align: center">单位</span>',
                    name: 'organizationUser.organizationName',
                    width: 75,
                    align: 'center'
                },
                {
                    label: '<span style="text-align: center">角色</span>',
                    name: 'organizationUser.roleName',
                    width: 200,
                    align: 'center'
                },
                {
                    label: '<span style="text-align: center">用户名</span>',
                    name: 'userProfile.realName',
                    width: 80,
                    align: 'center'
                },
                {
                    label: '<span style="text-align: center">性别</span>',
                    name: 'userProfile.gender',
                    width: 75,
                    align: 'center',
                    formatter: showgender
                },
                {label: '<span style="text-align: center">账号</span>', name: 'user.name', width: 100, align: 'center'},
                {
                    label: '<span style="text-align: center">操作</span>',
                    width: 200,
                    formatter: ShowOpertator,
                    align: 'center'
                }
            ],
            viewrecords: true,
            align: 'center',
            height: 350,
            rowNum: 20,
            pager: "#jqGridPager"
        });

    function ShowDate(cellvalue, options, rowObject) {
        if (cellvalue != null && cellvalue != "") {
            var timestamp4 = new Date(cellvalue);
            var dt = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
            return dt;
        } else {
            return "";
        }
    }


    function SearchBtn() {
        var usertype = $("#hidtype").val();
        var company = $("#company").val();
        var region = $("#region").val();
        var department = $("#department").val();
        var name = $("#name").val();
        var mobile = $("#mobile").val();

        var sdata = {   // 构建查询需要的参数
            usertype: usertype,
            company: company,
            region: region,
            department: department,
            name: name,
            mobile: mobile
        };

        var postData = $("#jqGrid").jqGrid("getGridParam", "postData");

        $.extend(postData, sdata);

        $("#jqGrid").jqGrid("setGridParam", {
            search: true    // (6)将jqGrid的search选项设为true
        }).trigger("reloadGrid", [{page: 1}]);   // (7)重新载入Grid表格，以使上述设置生效

    }


    function ShowOpertator(cellvalue, options, rowObject) {
        var link;
        var row = JSON.stringify(rowObject);
        link = "<div class='from-group'>" +
            "<div class='btn-group col-sm-2' style='width: 200px ;float: left'>" +
            "<button date-id='but1' type='button' class='btn btn-default btn-sm' onclick='select(" + row + ")'>" +
            "详情</button>" +
            "<button date-id='but1' type='button' class='btn btn-default btn-sm' onclick='update(" + rowObject.user.id + ")'>" +
            "修改</button>" +
            "<button date-id='but1' type='button' class='btn btn-default btn-sm' onclick='password(" + rowObject.user.id + ")'>" +
            "密码</button>" +
            "<button date-id='but2' type='button' class='btn btn-default btn-sm' onclick='del(" + rowObject.user.id + ")'>" +
            "删除</button>" +
            "</div>" +
            "</div>";
        return rowObject.id == -1 ? "" : link;
    }

    function showgender(cellvalue, options, rowObject) {
        switch (Number(cellvalue)) {
            case 1:
                return "男";
                break;
            case 2:
                return "女";
                break;
            default:
                return "保密";
                break;
        }

    }
    function showtype(cellvalue, options, rowObject) {
        return cellvalue == 1 ? '养殖场' : '政府';
    }


    function select(data) {
        var type = showtype(data.organizationUser.organizationType, null, null);
        var gender = showgender(data.userProfile.gender, null, null);
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;

            layer.open({
                type: 2,
                skin: 'layui-layer-lan',
                area: ['800px', '600px'],
                content: ['/management/user/showDetail', 'no'],
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    /*name  roleName  mobile  region  company  department  roleName  usertype  gender  email*/
                    body.find("#name").text(data.user.name);
                    body.find("#realName").text(data.userProfile.realName);
                    body.find("#mobile").text(data.user.mobile);
                    body.find("#region").text(data.userProfile.region);
                    body.find("#company").text(data.organizationUser.organizationName);
                    body.find("#department").text(data.departmentUser.departmentName);
                    body.find("#roleName").text(data.organizationUser.roleName);
                    body.find("#usertype").text(type);
                    body.find("#gender").text(gender);
                    body.find("#email").text(data.user.email);


                }
            });

        });
    }

    function update(id) {
        location.href = "/management/user/updateuser?id=" + id;
    }

    function password(id) {
        location.href = "/management/user/editPassword?id=" + id;
    }

    function del(id) {
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;
            var postData = {id: id};
            layer.confirm('确认要删除人员信息吗? 删除后不可恢复。', {
                btn: ['确认', '取消']

            }, function (index, layero) {

                $.ajax({
                    type: "POST",
                    url: "/management/user/del",
                    data: postData,
                    dataType: "json",
                    success: function (data) {
                        layer.msg('信息删除成功!', {icon: 1, time: 2000,});

                        $("#jqGrid").jqGrid("setGridParam").trigger("reloadGrid", [{page: 1}]);
                    }
                });

            }, function (index) {
                layer.close();
            });
        })
    }
    /* "<input type='hidden' id='hidtype' value='1'/>"+
     "<button date-id='but1' type='button'"+
     "class='btn btn-default btn-sm active'"+
     "onclick='SimpleSearch(1)'>"+
     "政府"+
     "</button>"+
     "<button date-id='but2' type='button' class='btn btn-default btn-sm'"+
     "onclick='SimpleSearch(2)'>"+
     "养殖户"+
     "</button>"*/
    function SimpleSearch(type) {
        if (Number(type) == 1) {
            $("#but").html();
            var str = "";
            str += "<input type='hidden' id='hidtype' value='3'/>" +
                "<button date-id='but1' type='button'" +
                "class='btn btn-default btn-sm active'" +
                "onclick='SimpleSearch(1)'>" +
                "政府人员" +
                "</button>" +
                "<button date-id='but2' type='button' class='btn btn-default btn-sm'" +
                "onclick='SimpleSearch(2)'>" +
                "养殖人员" +
                "</button>";
            $("#but").html(str);
        } else {
            $("#but").html();
            var str = "";
            str += "<input type='hidden' id='hidtype' value='1'/>" +
                "<button date-id='but1' type='button'" +
                "class='btn btn-default btn-sm'" +
                "onclick='SimpleSearch(1)'>" +
                "政府人员" +
                "</button>" +
                "<button date-id='but2' type='button' class='btn btn-default btn-sm active'" +
                "onclick='SimpleSearch(2)'>" +
                "养殖人员" +
                "</button>";
            $("#but").html(str);

        }

        var usertype = $("#hidtype").val();


        var sdata = {   // 构建查询需要的参数
            usertype: usertype
        };

        var postData = $("#jqGrid").jqGrid("getGridParam", "postData");

        $.extend(postData, sdata);

        $("#jqGrid").jqGrid("setGridParam", {
            search: true    // (6)将jqGrid的search选项设为true
        }).trigger("reloadGrid", [{page: 1}]);   // (7)重新载入Grid表格，以使上述设置生效

    }


</script>


</body>
</html>
